<template>
  <div>
    <!-- 按钮，点击后显示对话框 -->
    <el-button type="primary" @click="showDialog">点击我弹出对话框</el-button>
    
    <!-- 对话框组件 -->
    <el-dialog
      title="对话框标题"
      v-model="dialogVisible"
      width="30%"
      @close="handleClose"
    >
      <p>这是对话框的内容。</p>
      <template #footer>
        <!-- 底部操作按钮 -->
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const dialogVisible = ref(false);

const showDialog = () => {
  console.log("点击按钮，准备显示对话框");
  dialogVisible.value = true;
};

const handleClose = () => {
  console.log('对话框已关闭');
};

const handleConfirm = () => {
  console.log('确定按钮被点击');
  dialogVisible.value = false;
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>